<template>
	<view class="flex-col justify-start relative page">
	  <view class="section"></view>
	  <button @click="seekHelp()" class="text pos" style="background-color: aquamarine; width: 280rpx; height: 80rpx; line-height:80rpx;">一键求助</button>
	  <view class="text pos" style="margin-top: 100rpx;">
	  	<text style="font-size: 30rpx;">当前位置：{{location}}</text>
	  </view>
	  <view @click="back" class="flex-col justify-start items-center section_2 pos_2">
		
	    <view class="flex-col justify-start items-center image-wrapper">
	      <image
	        class="image"
	        src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16999675839893428626.png"
	      />
	    </view>
	  </view>
	</view>
</template>

<script>
import tabbar from '../../uni_modules/uview-ui/libs/config/props/tabbar';
	export default {
		data() {
			return {
				location:'江西',
				longitude :null,
				latitude :null,
			}
		},
		onReady(){
			
		},
		onLoad(){
			this.getLoaction()
		},
		methods: {
			back()
			{
				uni.navigateBack(
				{
					delta:1
				}
				)
			},
			getLoaction(){
				let that = this
				 
				uni.getLocation({
				    type: 'gcj02',
					isHighAccuracy:true,
				    success: function (res) {
						console.log(res)
						that.longitude = res.longitude;
						that.latitude = res.latitude;
						that.loAcquire(that.longitude,that.latitude)
				    }
				});
				// that.loAcquire(that.longitude,that.latitude)

			},
			loAcquire(longitude,latitude){
				let that = this;
				uni.showLoading({
				    title: '加载中',
					mask:true
				});
				let str =  `output=jsonp&key=MYOBZ-556W5-HMPIJ-IK4E6-JYOXV-OPFSU&location=${latitude},${longitude}`
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/?'+str,{}).then(res=>{
				  console.log(res);
				  uni.hideLoading();
				  if(res.status == 0){
					  that.location = res.result.address; //当前定位
				  }
				})
			},
			seekHelp(){
				let that = this
				uni.showModal({
				       title: '执行提示',
				       content: '将开始执行，请确认',
				       success: function (res) {
				           if (res.confirm) {
				               console.log('确认')
				               //执行
				               that.start()
				           } else if (res.cancel) {
				               console.log('取消');
				           }
				       }
				   });
			},
			start(){
				this.request({
					url:'/user/seekhelp',
					method:'GET',
					data:{
						longitude:this.longitude,
						latitude:this.latitude
					}
				}).then(res=>{
					if(res.code==='1'){
						uni.showToast({
							type:'success',
							title:'发送求助成功'
						})
					}else{
						uni.showToast({
							type:'error',
							title:'请重新发送'
						})
					}
				}).catch(()=>{
					uni.showToast({
						type:'error',
						title:'请重新发送'
					})
				})
			}

		}
	}
</script>

<style>
	
	/************************************************************
	** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
	** 否则页面将无法正常显示                                  **
	************************************************************/
	
	html {
	  font-size: 16px;
	}
	
	body {
	  margin: 0;
	  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
	    'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	view,
	image,
	text {
	  box-sizing: border-box;
	  flex-shrink: 0;
	}
	
	#app {
	  width: 100vw;
	  height: 100vh;
	}
	
	.flex-row {
	  display: flex;
	  flex-direction: row;
	}
	
	.flex-col {
	  display: flex;
	  flex-direction: column;
	}
	
	.justify-start {
	  justify-content: flex-start;
	}
	
	.justify-end {
	  justify-content: flex-end;
	}
	
	.justify-center {
	  justify-content: center;
	}
	
	.justify-between {
	  justify-content: space-between;
	}
	
	.justify-around {
	  justify-content: space-around;
	}
	
	.justify-evenly {
	  justify-content: space-evenly;
	}
	
	.items-start {
	  align-items: flex-start;
	}
	
	.items-end {
	  align-items: flex-end;
	}
	
	.items-center {
	  align-items: center;
	}
	
	.items-baseline {
	  align-items: baseline;
	}
	
	.items-stretch {
	  align-items: stretch;
	}
	
	.self-start {
	  align-self: flex-start;
	}
	
	.self-end {
	  align-self: flex-end;
	}
	
	.self-center {
	  align-self: center;
	}
	
	.self-baseline {
	  align-self: baseline;
	}
	
	.self-stretch {
	  align-self: stretch;
	}
	
	.flex-1 {
	  flex: 1 1 0%;
	}
	
	.flex-auto {
	  flex: 1 1 auto;
	}
	
	.grow {
	  flex-grow: 1;
	}
	
	.grow-0 {
	  flex-grow: 0;
	}
	
	.shrink {
	  flex-shrink: 1;
	}
	
	.shrink-0 {
	  flex-shrink: 0;
	}
	
	.relative {
	  position: relative;
	}
.page {
  background-color: #ffffff;
  background-image: linear-gradient(0deg, #9bb0da 0%, #617db6 48.7%, #183d8a 98.6%, #183d8a 100%);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: linear-gradient(0deg, #9bb0da 0%, #617db6 48.7%, #183d8a 98.6%, #183d8a 100%);
  width: 750rpx;
  height: 1624rpx;
}
.text {
  color: #ffffff;
  font-size: 49.34rpx;
  font-family: FZCHSJW--GB1;
  line-height: 45.66rpx;
  letter-spacing: -0.98rpx;
}
.pos {
  position: absolute;
  left: 50%;
  top: 186rpx;
  transform: translateX(-50%);
}
.section_2 {
  padding: 72rpx 0;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16999675839847876291.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 608rpx;
}
.pos_2 {
  position: absolute;
  left: 50%;
  top: 444.66rpx;
  transform: translateX(-50%);
}
.image-wrapper {
  padding: 162.66rpx 0;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/654ef63d5a7e3f031050da04/654ef6cc87ca550011b19e39/16999675839876820365.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 463.34rpx;
}
.image {
  width: 302rpx;
  height: 138.66rpx;
}
</style>
